<template>
  <div class="role">
    <div class="first">
      <div class="first-addition" @click="additionBtn">
        <img class="addition-img" src="../../assets/common/common-add.png" />
        <div class="addition-text">添加</div>
      </div>
    </div>

    <div class="second">
      <div class="second-table">
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          style="width: 100%; cursor: pointer"
          :header-cell-style="{
            color: '#949494',
            backgroundColor: '#F9F9F9',
          }"
        >
          <!-- 自定义暂无数据 -->
          <template slot="empty">
            <div class="empty-block">
              <img
                class="empty-block-img"
                src="../../assets/common/common-empty.png"
              />
              <div class="empty-block-text">暂无数据～</div>
            </div>
          </template>
          <el-table-column
            type="selection"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column prop="id" label="id"> </el-table-column>
          <el-table-column prop="userName" label="id名称"> </el-table-column>
          <el-table-column prop="phone" label="手机号码"> </el-table-column>
          <el-table-column prop="positionDesc" label="职位描述" width="460">
          </el-table-column>
          <el-table-column prop="createTime" label="加入时间">
          </el-table-column>
          <el-table-column prop="id" label="操作">
            <template slot-scope="scope">
              <div class="table-operation">
                <div class="table-operation-left" @click="editRole(scope.row)">
                  编辑
                </div>
                <div
                  class="table-operation-right"
                  @click="deteleRole(scope.row)"
                >
                  删除
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="second-pagination">
        <div class="pagination-left">共{{ totalNum }}条数据</div>

        <div class="pagination-right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="10"
            layout="sizes, prev, pager, next, jumper"
            :total="totalNum"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 删除权限用户 -->
    <div class="deleta">
      <el-dialog :visible.sync="deteleDialogVisible" @close="deteleReset" round>
        <div class="deleta-div">
          <img
            class="deleta-div-img"
            src="../../assets/common/common-warning.png"
          />
          <div class="deleta-div-title">是否删除该管理人员？</div>

          <div class="deleta-div-text">一旦删除。则该管理id不可登录后台。</div>
          <div class="deleta-div-button">
            <div class="deleta-div-button-left" @click="deteleConfirm">
              确定
            </div>
            <div class="deleta-div-button-right" @click="deteleReset">取消</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Bus from "../../utils/bus";

import { getmanagerList, deletemanagerIdList } from "../../api/jurisdiction";

export default {
  data() {
    return {
      // 第二区域 表格
      tableData: [],
      // 表格总数
      totalNum: 0,
      // 第二区域 点击删除 开启弹出框
      deteleDialogVisible: false,
      // 监听用户刷新
      loading: false,
      // 表格页数
      page: 1,
      // 表格每页条数
      limit: 11,
      // 获取当前列表的id
      managementId: "",
      // 控制当前页面功能性按钮开关
      roleFunShow: true,
      multipleSelection: [],
    };
  },
  created() {
    // 获取管理员列表
    this.loading = true;
    this.getmanagerListMet();
  },
  methods: {
    // 获取管理员列表
    getmanagerListMet() {
      let params = {
        phone: "", // 手机号
        userName: "", // 用户名 id名称
        nickname: "", // 昵称
        position: "", // 职位
        status: "", // 状态 1启用
        pageSize: this.limit, // 页码
        pageNo: this.page, // 页数
      };

      getmanagerList(params).then((res) => {
        if (res.resultStatus == true) {
          // 获取表格数组
          this.tableData = res.resultData.adminList;
          // 获取表格总数
          this.totalNum = res.resultData.totalNum;

          this.loading = false;
        }
      });
    },
    // 表格区域点击选中 勾选对应的
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击添加 跳转 添加角色权限页面
    additionBtn() {
      // if (this.roleFunShow == false) {
      //   return;
      // }

      Bus.$emit("log", "jurisdictionRoleAdd");
    },
    // 第二区域表格区域 编辑
    editRole(item) {
      // if (this.roleFunShow == false) {
      //   return;
      // }

      Bus.$emit("log", "jurisdictionRoleAdd", item);
    },
    // 第二区域表格区域 删除
    deteleRole(item) {
      if (this.roleFunShow == false) {
        return;
      }

      this.managementId = item.id;
      this.deteleDialogVisible = true;
    },
    // 第二区域 删除弹出框 确定
    deteleConfirm() {
      let params = this.managementId;

      deletemanagerIdList(params).then((res) => {
        if (res.resultStatus == true) {
          this.$message({
            message: "删除成功！",
            type: "success",
            duration: 2000,
          });

          this.loading = true;
          this.deteleDialogVisible = false;
          this.getmanagerListMet();
        }
      });
    },
    // 第二区域 删除弹出框 取消
    deteleReset() {
      this.managementId = "";
      this.deteleDialogVisible = false;
    },

    // 查询当前页码多少条
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      console.log(`每页 ${val} 条`);
      this.getmanagerListMet();
    },
    // 查询当前页
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      console.log(`当前页: ${val}`);
      this.getmanagerListMet();
    },
  },
};
</script>

<style lang="less" scoped>
.role {
  .first {
    display: flex;

    .first-addition {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      padding: 0 14px;
      box-sizing: border-box;
      height: 38px;
      background: #2588fa;
      border-radius: 4px;
      cursor: pointer;

      .addition-img {
        width: 12px;
        height: 12px;
        margin-right: 8px;
      }

      .addition-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }

  .second {
    margin-top: 20px;

    .second-table {
      /deep/ .el-table thead {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #949494;
      }

      /deep/ .el-table tr {
        height: 46px;
      }

      /deep/ .el-table__empty-text {
        line-height: 0;
      }

      /deep/ .el-table .el-table__cell {
        padding: 0;
      }

      .empty-block {
        margin-top: 62px;
        padding-bottom: 40px;

        .empty-block-img {
          width: 130px;
          height: 130px;
          margin: 0 auto;
        }

        .empty-block-text {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-top: 10px;
          height: 17px;
          line-height: 17px;
        }
      }

      .table-operation {
        display: flex;

        .table-operation-left,
        .table-operation-right {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2aa4ff;
          text-decoration: underline;
        }

        .table-operation-right {
          margin-left: 24px;
        }
      }
    }

    .second-pagination {
      height: 75px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .pagination-left {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #949494;
      }

      .pagination-right {
        /deep/ .el-pagination .btn-prev {
          padding: 0;
          width: 30px;
          height: 30px;
          background: #f4f5f9;
          border-radius: 2px;
          border: 1px solid #d9d9d9;
          margin-right: 8px;
        }

        /deep/ .el-pagination .btn-next {
          padding: 0;
          width: 30px;
          height: 30px;
          background: #f4f5f9;
          border-radius: 2px;
          border: 1px solid #d9d9d9;
        }

        /deep/ .el-pager li {
          padding: 0;
          width: 30px;
          height: 30px;
          border-radius: 2px;
          background: #f4f5f9;
          border: 1px solid #d9d9d9;
          line-height: 30px;
          margin-right: 8px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #949494;
        }

        /deep/ .el-pager li.active {
          background: #2588fa;
          color: #ffffff;
        }

        /deep/ .el-input--mini .el-input__inner {
          height: 30px;
          background: #f4f5f9;
        }

        /deep/ .el-input__inner {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
  }

  // 商品上下架
  .deleta {
    /deep/ .el-dialog__body {
      padding: 0;
    }

    /deep/ .el-dialog {
      width: 350px;
      height: 231px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /deep/ .el-dialog__footer {
      padding: 0;
    }

    .deleta-div {
      width: 100%;
      text-align: center;
      .deleta-div-img {
        width: 56px;
        height: 56px;
        margin: 0 auto;
      }

      .deleta-div-title {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        margin-top: 8px;
      }

      .deleta-div-text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 2px;
      }

      .deleta-div-button {
        display: flex;
        justify-content: center;
        align-content: center;
        margin-top: 18px;

        .deleta-div-button-left,
        .deleta-div-button-right {
          width: 88px;
          height: 32px;
          background: linear-gradient(135deg, #36c53d 0%, #3fd747 100%);
          border-radius: 10px;
          text-align: center;
          line-height: 32px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          cursor: pointer;
        }

        .deleta-div-button-right {
          margin-left: 8px;
          border: 1px solid #e9edf4;
          color: rgba(0, 0, 0, 0.65);
          background: #ffffff;
        }
      }
    }
  }
}
</style>
